<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Magic Animations CSS3</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="http://www.minimamente.com/example/magic_animations/css/magic.min.css">
	<link rel="stylesheet" href="http://www.minimamente.com/example/magic_animations/css/fontello.css">
	<link rel="stylesheet" href="http://www.minimamente.com/example/magic_animations/css/style.css">
	<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
</head>
<body>
	
	<div id="page" class="site">
	 	
		<header id="head" class="site-header" role="banner" style="margin-top:30px">
			<a id="logo" href="http://www.minimamente.com" title="minimamente.com">{m}</a>
			<span class="btnmute tubular-mute icon-mic"></span>
		</header>

		<div id="main" class="site-main">
			
			<!-- START DEMO code -->
			
			<div id="testbox">
				<div id="retrobox"></div>
				<div id="timing" class="perspective"><span class="icon-diamond"></span></div>
			</div>
			
			<div id="cssoptions">
			
				<a target="_blank" href="https://github.com/miniMAC/magic/archive/master.zip" rel="nofollow" class="gitbtn" title="Magic Animations CSS3"><span class="icon-github-circled"></span> DOWNLOAD from GitHub</a>
			
				<h3>Magic Effects</h3>
				<a rel="nofollow" class="btn" data-test='magic'>magic</a>
				<a rel="nofollow" class="btn" data-test='twisterInDown'>twisterInDown</a>
				<a rel="nofollow" class="btn" data-test='twisterInUp'>twisterInUp</a>
				<a rel="nofollow" class="btn" data-test='swap'>swap</a>
				
				<h3>Bling</h3>
				<a rel="nofollow" class="btn" data-test='puffIn'>puffIn</a>
				<a rel="nofollow" class="btn" data-test='puffOut'>puffOut</a>
				<a rel="nofollow" class="btn" data-test='vanishIn'>vanishIn</a>
				<a rel="nofollow" class="btn" data-test='vanishOut'>vanishOut</a>
				
				<h3>Static Effects</h3>
				<a rel="nofollow" class="btn" data-test='openDownLeft'>openDownLeft</a>
				<a rel="nofollow" class="btn" data-test='openDownRight'>openDownRight</a>
				<a rel="nofollow" class="btn" data-test='openUpLeft'>openUpLeft</a>
				<a rel="nofollow" class="btn" data-test='openUpRight'>openUpRight</a>
				<a rel="nofollow" class="btn" data-test='openDownLeftRetourn'>openDownLeftRetourn</a>
				<a rel="nofollow" class="btn" data-test='openDownRightRetourn'>openDownRightRetourn</a>
				<a rel="nofollow" class="btn" data-test='openUpLeftRetourn'>openUpLeftRetourn</a>
				<a rel="nofollow" class="btn" data-test='openUpRightRetourn'>openUpRightRetourn</a>
				
				<h3>Static Effects Out</h3>
				<a rel="nofollow" class="btn" data-test='openDownLeftOut'>openDownLeftOut</a>
				<a rel="nofollow" class="btn" data-test='openDownRightOut'>openDownRightOut</a>
				<a rel="nofollow" class="btn" data-test='openUpLeftOut'>openUpLeftOut</a>
				<a rel="nofollow" class="btn" data-test='openUpRightOut'>openUpRightOut</a>
				
				<h3>Perspective</h3>
				<a rel="nofollow" class="btn" data-test='perspectiveDown'>perspectiveDown</a>
				<a rel="nofollow" class="btn" data-test='perspectiveUp'>perspectiveUp</a>
				<a rel="nofollow" class="btn" data-test='perspectiveLeft'>perspectiveLeft</a>
				<a rel="nofollow" class="btn" data-test='perspectiveRight'>perspectiveRight</a>
				<a rel="nofollow" class="btn" data-test='perspectiveDownRetourn'>perspectiveDownRetourn</a>
				<a rel="nofollow" class="btn" data-test='perspectiveUpRetourn'>perspectiveUpRetourn</a>
				<a rel="nofollow" class="btn" data-test='perspectiveLeftRetourn'>perspectiveLeftRetourn</a>
				<a rel="nofollow" class="btn" data-test='perspectiveRightRetourn'>perspectiveRightRetourn</a>
				
				<h3>Rotate</h3>
				<a rel="nofollow" class="btn" data-test='rotateDown'>rotateDown</a>
				<a rel="nofollow" class="btn" data-test='rotateUp'>rotateUp</a>
				<a rel="nofollow" class="btn" data-test='rotateLeft'>rotateLeft</a>
				<a rel="nofollow" class="btn" data-test='rotateRight'>rotateRight</a>
				
				<h3>Slide</h3>
				<a rel="nofollow" class="btn" data-test='slideDown'>slideDown</a>
				<a rel="nofollow" class="btn" data-test='slideUp'>slideUp</a>
				<a rel="nofollow" class="btn" data-test='slideLeft'>slideLeft</a>
				<a rel="nofollow" class="btn" data-test='slideRight'>slideRight</a>
				<a rel="nofollow" class="btn" data-test='slideDownRetourn'>slideDownRetourn</a>
				<a rel="nofollow" class="btn" data-test='slideUpRetourn'>slideUpRetourn</a>
				<a rel="nofollow" class="btn" data-test='slideLeftRetourn'>slideLeftRetourn</a>
				<a rel="nofollow" class="btn" data-test='slideRightRetourn'>slideRightRetourn</a>
				
				<h3>Math</h3>
				<a rel="nofollow" class="btn" data-test='swashOut'>swashOut</a>
				<a rel="nofollow" class="btn" data-test='swashIn'>swashIn</a>
				<a rel="nofollow" class="btn" data-test='foolishOut'>foolishOut</a>
				<a rel="nofollow" class="btn" data-test='foolishIn'>foolishIn</a>
				<a rel="nofollow" class="btn" data-test='holeOut'>holeOut</a>
				
				<h3>Tin</h3>
				<a rel="nofollow" class="btn" data-test='tinRightOut'>tinRightOut</a>
				<a rel="nofollow" class="btn" data-test='tinLeftOut'>tinLeftOut</a>
				<a rel="nofollow" class="btn" data-test='tinUpOut'>tinUpOut</a>
				<a rel="nofollow" class="btn" data-test='tinDownOut'>tinDownOut</a>
				
				<a rel="nofollow" class="btn" data-test='tinRightIn'>tinRightIn</a>
				<a rel="nofollow" class="btn" data-test='tinLeftIn'>tinLeftIn</a>
				<a rel="nofollow" class="btn" data-test='tinUpIn'>tinUpIn</a>
				<a rel="nofollow" class="btn" data-test='tinDownIn'>tinDownIn</a>
				
				<h3>Bomb</h3>
				<a rel="nofollow" class="btn" data-test='bombRightOut'>bombRightOut</a>
				<a rel="nofollow" class="btn" data-test='bombLeftOut'>bombLeftOut</a>
			
			</div>
			
			<!-- END DEMO code -->
				
		</div><!-- #main -->
		<div class="footer-banner" style="width:728px; margin:30px auto"></div>
		</div>		
	</div>

<script src="http://dreamsky.github.io/main/blog/common/jquery.min.js"></script>
<script src="http://www.minimamente.com/example/magic_animations/js/tubular.js"></script>
<script src="http://www.minimamente.com/example/magic_animations/js/scripts.js"></script>
<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
</body>
</html>